<template>
	<view>
		<view class="content">
			<Parser :html="html" @linkpress="linkpress" show-with-animation lazy-load>加载中...</Parser>
		</view>
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator open-type="switchTab" url="/pages/index" class="p-b-btn">
				<text class="icon zhuye1"></text>
				<text>首页</text>
			</navigator>
			<view class="p-b-btn" :class="{active: claim}" @click="toClaim">
				<text class="icon huiyuan1"></text>
				<text>认领</text>
			</view>
			<view class="action-btn-group">
				<button type="primary" open-type="share" class="action-btn no-border">分享</button>
				<button type="primary" :disabled="isDisabled" @click="postOrder" class="action-btn no-border">委托购买</button>
			</view>
		</view>
		<Login v-if="showLogin"></Login>
		<ShowForm ref="shwoForm"></ShowForm>
	</view>
</template>

<script>
	import Parser from "@/components/Parser/index"
	import Login from "@/components/login"
	import ShowForm from "@/components/shwoForm"
	export default{
		components: {
			Parser,
			Login,
			ShowForm
		},
		data() {
			return {
				class : 1,//1商标 2公司 3网店 4专利 5版权
				number : '',
				html: '',
				isDisabled : false,
				claim: false,
				showLogin : false
			}
		},
		onLoad(options){
			let that = this
			uni.showShareMenu()
			this.class = options.class
			this.number = options.number
			this.loadData()
			uni.$once('loginClick',function(){
				that.showLogin = true
				that.isDisabled = false
			})
		},
		methods:{
			linkpress(res) {
				this.$goto(res.href)
			},
			async loadData(){
				let data = await this.$api('GET','search/'+this.number,{class:this.class})
				this.html = data.html
				this.claim = data.claim
			},
			async postOrder(){
				this.isDisabled = true
				if(this.serviceInfo.form_id > 0){
					this.$refs.shwoForm.loadData(this.serviceInfo.form_id)
				}else{
					await this.$api('POST','marketorder',{class:this.class,number:this.number})
				}
			},
			//认领
			async toClaim(){
				this.isDisabled = true
				if(this.serviceInfo.form_id > 0){
					this.$refs.shwoForm.loadData(this.serviceInfo.form_id)
				}else{
					await this.$api('POST','claim',{class:this.class,number:this.number})
				}
				this.isDisabled = false
			}
		}
	}
</script>

<style lang='scss'>
	.content{
		min-height: 500upx;
		display:flex;
		justify-content: center;
		align-items:center;
		padding-bottom:150upx;
		background: #fff;
	}
	/* 底部操作菜单 */
	.page-bottom{
		position:fixed;
		left: 2%;
		bottom:20upx;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 96%;
		height: 100upx;
		background: rgba(255,255,255,.9);
		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
		border-radius: 16upx;
		
		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;
			.icon{
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}
			&.active, &.active .icon{
				color: #ff7575;
			}
			.love{
				font-size: 46upx;
			}
		}
		.action-btn-group{
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, $uni-color-primary,#00BB00,#01814A);
			margin-left: 20upx;
			position:relative;
			&:after{
				content: '';
				position:absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255,255,255,.5);
			}
			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 230upx;
				height: 100%;
				font-size: 28upx;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}
</style>
